12.27 #2

qinghuanduelf · 2023-12-27T11:27:12Z

No description provided.

underthestars-zhy · 2023-12-27T11:31:18Z

pages/hackpack-web-frontend.md

 ![示例](https://cloud.githubusercontent.com/assets/3401801/21839837/cc082120-d78e-11e6-836e-0cad2e505736.png)

-为了构建这个应用，我们将使用 React 和 Redux。为了存储我们的数据，我们将使用 LocalStorage，它允许您在浏览器中拥有一种小型数据存储。
+为了构建我们的网站，我们将使用 React 和 Redux。除此之外，由于我们希望下次打开网页还可以看到我们写过的日记，我们需要在本地储存数据，那么就要用 LocalStorage 去存储我们的数据，这是一种允许用户在浏览器中拥有一种小型数据存储的技术。


可以给 LocalStorage 加上链接 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

加入对 React 的 Redux 的介绍

underthestars-zhy · 2023-12-27T11:31:52Z

pages/hackpack-web-frontend.md

@@ -1,16 +1,16 @@
-# Web Frontend Hackpack
+# Web Frontend 教程


改成 Rect：Web 前端开发教程

underthestars-zhy · 2023-12-27T11:36:34Z

pages/hackpack-web-frontend.md

+为了构建我们的网站，我们将使用 React 和 Redux。除此之外，由于我们希望下次打开网页还可以看到我们写过的日记，我们需要在本地储存数据，那么就要用 LocalStorage 去存储我们的数据，这是一种允许用户在浏览器中拥有一种小型数据存储的技术。

-有许多不同的方法和框架可以用来创建相同的应用，但我喜欢 React + Redux，因为它们共同为您提供了一种处理交互、流动数据和为应用创建新功能的非常清晰和逻辑的方式。
+我们有许多不同的方法和框架可以用来创建相同的应用，但我喜欢 React 和 Redux，因为它们为你提供了一种非常清晰和逻辑地去处理交互、流动数据和为应用创建新功能的方式。


但我喜欢改成但我们推荐使用

underthestars-zhy · 2024-01-03T14:20:09Z

pages/hackpack-web-api.md

@@ -1,47 +1,36 @@
-# Web API教程
+# Web API 教程


改成 NodeJS：Web API 教程

underthestars-zhy · 2024-01-03T14:21:18Z

pages/hackpack-web-api.md

+### 介绍

-本研讨会的目标是学习如何使用 Node、MongoDB 和 Express 构建 RESTful Web API。从这个研讨会中，你将了解什么是 Web API，深入了解 Web 的前端/后端结构，并为你的 We b应用程序构建自己的后端！你还将学到一些关于 JavaScript 以及你可以在其中执行的所有有趣的事情。
+本教程的目标是讲述如何学习和使用 Node、MongoDB 和 Express 构建 RESTful Web API。在本教程中，你将了解什么是 Web API，深入了解 Web 的前端和后端结构，并为你的 Web 应用程序构建自己的后端！你还将学到一些关于 JavaScript 的知识以及你可以做的所有有趣的事情。


加入对 Node、MongoDB 和 Express 的介绍

underthestars-zhy · 2024-01-03T14:28:49Z

pages/hackpack-web-api.md

+API 是应用程序编程接口。简而言之，API 是一种从你自己的程序访问在服务器上运行的数据和服务的方式。一个很好的公开可用的 API 的例子是 Dog API，它位于 https://dog.ceo/dog-api/ 。你可以通过点击每个路由下列出的 “JSON” 按钮，访问有关 Dog 的各种有趣信息。

-你会注意到你将被重定向到一个包含一些文本的网页，文本使用花括号‘{}’格式化。你看到的是一个以 JSON（JavaScript对象表示法）表示的 JavaScript 对象。JS 对象本质上是 Python 字典或 C++ 映射，它的功能是将键映射到值。实际上 JavaScript 中的几乎所有东西都是一个对象（另一则故事），所以这很重要。它之所以重要的另一个原因是 JSON 是在 Web 中传输数据的标准方式，所以例如当你在网站上注册账户时，发送到Web服务器的数据是 JSON 格式的。此外， MongoDB 将其信息存储在 JavaScript 对象中。
+你将被重定向到一个包含一些文本的网页，文本使用花括号‘{}’格式化。你看到的是一个以 JSON（JavaScript对象表示法）表示的 JavaScript 对象。JS 对象本质上是 Python 字典或 C++ 映射，它的功能是将键映射到值。实际上 JavaScript 中的几乎所有东西都是一个对象，所以这很重要。它之所以重要的另一个原因是 JSON 是在 Web 中传输数据的标准方式，所以例如当你在网站上注册账户时，发送到Web服务器的数据是 JSON 格式的。此外， MongoDB 将其信息存储在 JavaScript 对象中。


实际上 JavaScript 中的几乎所有东西都是一个对象，所以这很重要 不通顺

它之所以重要的另一个原因是 JSON 是在 Web 中传输数据的标准方式 不通顺

发送到Web服务器的数据 不符合规范

此外， MongoDB 将其信息存储在 JavaScript 对象中。 没看懂，需要额外的技术解释

underthestars-zhy · 2024-01-03T14:31:27Z

pages/hackpack-web-frontend.md

+我们有许多不同的方法和框架可以用来创建相同的应用，但我喜欢 React 和 Redux，因为它们为你提供了一种非常清晰和逻辑地去处理交互、流动数据和为应用创建新功能的方式。

-本教程包括使用许多 ES6（和JavaScript的更新版本）语法的代码。如果您对某些语法不熟悉，[这里](http://es6-features.org/)是一个很好的参考来源。如果您对JavaScript不熟悉，[这里](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)是一个很好的参考工具，[这里](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)和[这里](https://www.codecademy.com/)是很好的学习资源。
+本教程包括使用许多 ES6（和JavaScript的更新版本）语法的代码。如果你对某些语法不熟悉，[此教程](http://es6-features.org/)是一个很好的参考来源。如果你对JavaScript不熟悉，[此教程](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)是一个很好的参考工具，[此教程](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)和[此教程](https://www.codecademy.com/)是很好的学习资源。


和JavaScript的更新版本 不符合排版规范

如果你对JavaScript不熟悉 不符合排版规范

underthestars-zhy · 2024-01-03T14:33:02Z

pages/hackpack-web-frontend.md

-这个命令运行一个开发服务器（你可以在 `package.json` 中查看实际的命令），它会在你进行更改时自动重新加载你的应用程序。在本教程中，你不需要太担心这个命令的具体内容（但如果你感兴趣的话，该应用程序正在使用 [React 热加载](https://www.youtube.com/watch?v=xsSnOQynTHs)）。
-
-打开 [http://localhost:3000](http://localhost:3000)，你应该能看到一个相当空的界面。
+这个命令会运行一个开发服务器，它会在你进行更改时自动重新加载你的应用程序。在本教程中，我们不会提到这个命令的具体内容（但如果你感兴趣的话，该应用程序正在使用 [React 热加载](https://www.youtube.com/watch?v=xsSnOQynTHs)）。


将视频替换为 B 站类似教程的内容

underthestars-zhy · 2024-01-03T14:33:42Z

pages/hackpack-web-next.md

+
+### 什么是 NextJS？
+NextJS 是一个框架，它允许你快速开始使用 React 和服务器端代码。它带有内置功能，如路由（路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程）、热模块替换（允许在运行时更新各种模块，而无需进行完全刷新）、服务器端渲染（一种在用户自己的服务器上加载网站的 JavaScript 的方法）和代码分割（一种将代码拆分成多个独立文件的技术），可以提高性能，而这些功能如果自己实现可能会是一个**巨大**的痛苦。
+


加入对 Express 的介绍

underthestars-zhy · 2024-01-03T14:36:05Z

pages/hackpack-web-next.md

+git clone https://github.com/TreeHacks/hackpack-web-next.git
+```
+
+如果想启动，请运行以下命令：


如果想启动 -> 如果想要启动该程序

qinghuanduelf added 4 commits December 27, 2023 08:20

Add files via upload

d6e5092

Add files via upload

0af66e6

Delete pages/hackpack-web-api.md

95f7f4b

Add files via upload

e490e6a

underthestars-zhy requested changes Jan 3, 2024

View reviewed changes

qinghuanduelf added 5 commits January 4, 2024 16:08

Delete pages/hackpack-web.md

03b32f9

Add files via upload

846a5de

Add files via upload

b10bf49

Delete pages/hardware_hackpack.md

64d8bf4

Add files via upload

cc34b14

		@@ -1,16 +1,16 @@
		# Web Frontend Hackpack
		# Web Frontend 教程


		### 什么是 NextJS？
		NextJS 是一个框架，它允许你快速开始使用 React 和服务器端代码。它带有内置功能，如路由（路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程）、热模块替换（允许在运行时更新各种模块，而无需进行完全刷新）、服务器端渲染（一种在用户自己的服务器上加载网站的 JavaScript 的方法）和代码分割（一种将代码拆分成多个独立文件的技术），可以提高性能，而这些功能如果自己实现可能会是一个巨大的痛苦。

12.27 #2

Are you sure you want to change the base?

12.27 #2

Uh oh!

Conversation

qinghuanduelf commented Dec 27, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants